<template>
	<view class="content">
		<view class="title-view" :style="{'margin-top':magringTopTitle+'px'}">
			<view style="flex: 1;display: flex;flex-direction: row;align-items: center;box-sizing: border-box;padding-left: 15px;">
				<image @click="goback" :src="leftjiantouBlack" style="width: 16px;" mode="widthFix"></image>
			</view>
			<view style="flex: 2;text-align: center;line-height: 35px;">
				{{title}}
			</view>
			<view style="flex: 1;"></view>
		</view>
		<view class="content-box">
			<view class="content-box-top">
				<view class="content-qiangdan-btn" @click="gotoSnatchOrder">马上抢单</view>
				<view class="content-title">
					<image class="user-img" :src="recyclerInfo.head_image_url" mode=""></image>
					<view class="content-title-right">
						<view class="user-name">{{recyclerInfo.name}}</view>
						<view class="user-text">今日已经完成 <text style="color: #FFEC05;">{{recyclerInfo.complete_num}}</text>单</view>
					</view>
				</view>
				<view class="content-user-money">
					<view class="content-user-money-item" @click="gotoWalletFun">
						<view class="content-user-money-item-top"> <text style="font-size: 12px;margin-right: 2px;">¥</text>{{recyclerInfo.money}}</view>
						<view class="content-user-money-item-bottom">账户余额</view>
					</view>
					<view class="content-user-money-item" @click="gotoWalletFun">
						<view class="content-user-money-item-top"> <text style="font-size: 12px;margin-right: 2px;">¥</text>{{recyclerInfo.sett_amount}}</view>
						<view class="content-user-money-item-bottom">待结算佣金</view>
					</view>
					<view class="content-user-money-item">
						<view class="content-user-money-item-top"> <text style="font-size: 12px;margin-right: 2px;">¥</text>{{recyclerInfo.lj_order_num}}</view>
						<view class="content-user-money-item-bottom">累计订单数</view>
					</view>
				</view>
			</view>
			<view class="order-box">
				<view class="news-content-title">我的订单</view>
				<view class="order-item-box">
					<view class="order-item-box-item">
						<image class="order-item-box-img" @click="gotoRecoveryOrder(1,0)" :src="orderImg01" mode=""></image>
						<view class="order-item-text">已接单</view>
					</view>
					<view class="order-item-box-item" style="flex: 1.5;">
						<image class="order-item-box-img" @click="gotoRecoveryOrder(2,0)" :src="orderImg03" mode=""></image>
						<view class="order-item-text">结算中</view>
					</view>
					<view class="order-item-box-item" >
						<image class="order-item-box-img" @click="gotoRecoveryOrder(3,2)" :src="orderImg02" mode=""></image>
						<view class="order-item-text">已完成</view>
					</view>
				</view>
			</view>
			<view class="seriver-box">
				<view class="news-content-title">其他服务</view>
				<view class="seriver-item" style="margin-top: 15px;" @click="gotoWalletFun">
					<view class="seriver-item-left">
						<image class="seriver-item-left-img" :src="serverImg01" mode=""></image>
						<view class="seriver-item-left-text">我的钱包</view>
					</view>
					<image class="seriver-item-right" :src="rightjiantou" mode=""></image>
				</view>
				<view class="seriver-item" @click="gotoUnregister">
					<view class="seriver-item-left">
						<image class="seriver-item-left-img" :src="serverImg02" mode=""></image>
						<view class="seriver-item-left-text">个人信息</view>
					</view>
					<image class="seriver-item-right" :src="rightjiantou" mode=""></image>
				</view>
				<view class="seriver-item" @click="gotoSnatchOrder">
					<view class="seriver-item-left">
						<image class="seriver-item-left-img" :src="serverImg03" mode=""></image>
						<view class="seriver-item-left-text">抢单大厅</view>
					</view>
					<image class="seriver-item-right" :src="rightjiantou" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	
	export default{
		data(){
			return{
				title:'回收人员中心',
				leftjiantouBlack:baseUrl+'/uploads/static/image/left-black.png',
				rightjiantou:baseUrl+'/uploads/static/image/right-jiantou.png',
				userImg:baseUrl+'/uploads/static/image/recovery_my_top_head@2x.png',
				orderImg01:baseUrl+'/uploads/static/image/recovery_ recycler_order_icon_01@2x.png',
				orderImg02:baseUrl+'/uploads/static/image/recovery_ recycler_order_icon_02@2x.png',
				orderImg03:baseUrl+'/uploads/static/image/recovery_ recycler_order_icon_03@2x.png',
				serverImg01:baseUrl+'/uploads/static/image/recovery_ recycler_other_icon_01@2x.png',
				serverImg02:baseUrl+'/uploads/static/image/recovery_ recycler_other_icon_02@2x.png',
				serverImg03:baseUrl+'/uploads/static/image/recovery_ recycler_other_icon_03@2x.png',
				magringTopTitle:0,
				recyclerInfo:{}
			}
		},
		onLoad() {
			//计算右上角高度
			 let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			 this.magringTopTitle = menuButtonInfo.top
		},
		onShow() {
			this.getRecyclerInfoFun()
		},
		methods:{
			getRecyclerInfoFun(){
				http.getRecyclerInfo().then((res)=>{
					if(res.data.code == 1){
						this.recyclerInfo = res.data.data
						uni.setStorageSync('recyclerInfo',JSON.stringify(res.data.data))
					}
				})
			},
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
			gotoUnregister(){
				uni.navigateTo({
					url:'/pages/recoveryCenter/unregisteredShow?type=enit'
				})
			},
			gotoWalletFun(){
				uni.navigateTo({
					url:'/pages/recoveryCenter/wallet'
				})
			},
			gotoSnatchOrder(){
				uni.navigateTo({
					url:'/pages/recoveryCenter/snatchOrders'
				})
			},
			gotoRecoveryOrder(type){
				uni.navigateTo({
					url:'/pages/recoveryCenter/orderList?type='+type
				})
			}
		}
		
	}
</script>

<style>
	.content{
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(#C7F2E9 10%, #F8F9FD 20%);
		overflow: hidden;
		font-family: 'PingFang Bold';
	}
	.title-view{
		width: 100%;
		text-align: center;
		height: 35px;
		line-height: 35px;
		color: #333;
		font-weight: bold;
		display: flex;
	}
	.content-box{
		width: 100%;box-sizing: border-box;padding: 20px 12px;
	}
	.content-box-top{
		width: 100%;background: linear-gradient(48deg, #20CAAA 0%, #4ADF9E 100%);border-radius: 10px;
		position: relative;
		box-sizing: border-box;
		padding: 24px;
	}
	.content-qiangdan-btn{width: 90px;height: 36px;position: absolute;right: 0;top: 34px;border-radius: 18px 0 0 18px;background: linear-gradient(270deg, #F6B22E 0%, #F6D27B 100%);text-align: center;line-height: 36px;color: #333;font-size: 14px;}
	.content-title{width: 100%;display: flex;flex-direction: row;}
	.user-img{width: 54px;height: 54px;border: 1px solid #20CAAA;border-radius: 50%;margin-right: 15px;}
	.content-title-right{width: calc(100% - 70px);}
	.user-name{font-size: 18px;color: #fff;}
	.user-text{font-size: 14px;color: rgba(250,250,250,0.75);margin-top: 5px;}
	.content-user-money{width: 100%;display: flex;flex-direction: row;margin-top: 30px;}
	.content-user-money-item{flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
	.content-user-money-item-top{font-size: 20px;color: #fff;font-weight: 600;}
	.content-user-money-item-bottom{font-size: 12px;color: rgba(250,250,250,0.75);margin-top: 5px;}
	.order-box{width: 100%;overflow: hidden;margin-top: 12px;border-radius: 10px;background: #fff;box-sizing: border-box;padding: 20px 12px;}
	.news-content-title{
		width: 100%;
		box-sizing: border-box;
		padding-left: 12px;
		font-weight: 500;
		font-size: 17px;
		font-weight: bold;
	}
	.order-item-box{width: 100%;margin-top: 15px;display: flex;flex-direction: row;align-items: center;}
	.order-item-box-item{flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
	.order-item-box-img{width: 62px;height: 62px;}
	.order-item-text{font-size: 14px;text-align: center;color: #333;}
	.seriver-box{width: 100%;overflow: hidden;margin-top: 12px;border-radius: 10px;background: #fff;box-sizing: border-box;padding:20px 12px 10px 12px;}
	.seriver-item{width: 100%;height: 60px;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.seriver-item-left{display: flex;flex-direction: row;align-items: center;}
	.seriver-item-left-img{width: 20px;height: 20px;margin-right: 15px;margin-left: 12px;}
	.seriver-item-left-text{font-size: 16px;color: #333;}
	.seriver-item-right{width: 14px;height: 14px;}
</style>